<template>
  <view class="container" :style="{ height: height + 'px' }">
    <view class="container_form">
      <u-form :rules="rules" labelPosition="left" :model="params" ref="uForm" labelWidth="150" labelStyle="{fontSize:13px}">
        <u-form-item class="justify-content-between" label="日期" prop="createTime" borderBottom ref="item1">
          <u-input class="my-input" v-model="params.createTime" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="justify-content-between" label="客户" prop="customerName" borderBottom ref="item1">
          <view @click="showPicker = true">
            <u-input class="my-input" v-model="params.customerName" border="none" placeholder="请选择" disabled disabledColor="#ffffff"></u-input>
          </view>

          <view slot="right" class="flex">
            <u-icon name="arrow-right"></u-icon>
            <button class="add-client" @click="addCustomer">新增客户</button>
          </view>
        </u-form-item>
        <u-form-item class="justify-content-between" label="部门" prop="deptName" borderBottom ref="item1">
          <u-input class="my-input" v-model="params.deptName" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="justify-content-between" label="经办人" prop="userName" borderBottom ref="item1" @click="showUserPicker = true">
          <u-input class="my-input" v-model="params.userName" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="justify-content-between" label="费用总额" prop="taxAmount" ref="item1">
          <u-input class="my-input" v-model="params.taxAmount" border="none" readonly></u-input>
        </u-form-item>
      </u-form>
    </view>

    <view class="container_box" v-for="(item, index) in params.detailList" :key="index">
      <view class="container_box_item">
        <view>费用名称</view>
        <view>{{ item.subjectName }}</view>
      </view>
      <view class="container_box_item">
        <view>金额</view>
        <view>{{ item.taxAmount }}</view>
      </view>
      <view class="container_box_item" style="border-bottom: none">
        <view>备注</view>
        <view>{{ item.remark }}</view>
      </view>
    </view>
    <view class="add_sub">
      <button class="btn" @click="addSub">+ 新增</button>
    </view>
    <view class="bottom">
      <button class="btn back" @click="submit">保存</button>
      <button class="btn" @click="examine">审批</button>
    </view>
    <u-picker :show="showPicker" :columns="customList" keyName="name" @confirm="confirm" @cancel="showPicker = false"></u-picker>
    <u-picker :show="showUserPicker" :columns="userList" keyName="name" @confirm="userConfirm" @cancel="showUserPicker = false"></u-picker>
  </view>
</template>

<script>
import { getUserInfo, curTime } from '@/service/auth'
import { expenseApply, expenseApplyExamine, expenseDetail } from '@/service/api/pay'
import { getbasCustomerList } from '@/service/api/shopping'
import { getSysUserList } from '@/service/api/logistics'
import leeDatetime from '@/components/lee-datetime'
export default {
  components: {},
  data() {
    return {
      params: {
        createTime: '',
        userName: '',
        userId: '',
        customerName: '',
        customerId: '',
        deptName: '',
        deptId: '',
        taxAmount: 0,
        detailList: [],
      },
      rules: {
        userName: {
          type: 'string',
          required: true,
          message: '',
          trigger: ['blur', 'change'],
        },
      },
      customList: [],
      showPicker: false,
      showUserPicker: false,
      itemDetail: {},
      userList: [],
    }
  },
  onReady() {},

  onShow() {
    uni.$on('refreshCustomerData', res => {
      if (res.refresh) {
        this.customList = []
        this.getCustomerList()
      }
    })
  },
  onLoad(options) {
    if (options.id) {
      let itemId = options.id
      this.getDetail(itemId)
    } else {
      this.params.createTime = curTime()
      this.user = getUserInfo()
      this.params.userName = this.user.userName
      this.params.deptName = this.user.deptName
      this.params.deptId = this.user.deptId
    }
    this.getUserList()
    this.getCustomerList()
  },
  computed: {},
  methods: {
    startDateChange(e) {
      this.params.createTime = e.value
    },
    confirm(e) {
      console.log('confirm', e)
      this.params.customerName = e.value[0].name
      this.params.customerId = e.value[0].id
      this.showPicker = false
    },
    userConfirm(e) {
      console.log('userConfirm', e)
      this.params.userName = e.value[0].name
      this.params.deptName = e.value[0].deptName
      this.params.deptId = e.value[0].deptId
      this.params.userId = e.value[0].id
      this.showUserPicker = false
    },
    getDetail(itemId) {
      const _this = this
      uni.showLoading()
      expenseDetail({ id: itemId })
        .then(res => {
          uni.hideLoading()
          _this.itemDetail = res.data.order
          _this.params.customerName = _this.itemDetail.customerName
          _this.params.customerId = _this.itemDetail.customerId
          _this.params.userName = _this.itemDetail.userName
          _this.params.userId = _this.itemDetail.userId
          _this.params.deptName = _this.itemDetail.deptName
          _this.params.deptId = _this.itemDetail.deptId
          _this.params.createTime = _this.itemDetail.createTime
          _this.params.taxAmount = _this.itemDetail.taxAmount
          _this.params.detailList = _this.itemDetail.detailList
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    getCustomerList() {
      const _this = this
      uni.showLoading()
      getbasCustomerList({ page: 1, size: 999 })
        .then(res => {
          uni.hideLoading()
          _this.customList.push(res.content)
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    getUserList() {
      const _this = this
      getSysUserList()
        .then(res => {
          _this.userList.push(res.content)
        })
        .catch(err => {
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    submit() {
      uni.showLoading({ title: '提交中' })
      if (this.params.detailList.length == 0) {
        uni.showToast({
          title: '请先新增费用',
          icon: 'none',
        })
        return
      }
      expenseApply(this.params)
        .then(res => {
          uni.hideLoading()
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
          uni.$emit('refreshCostData', { refresh: true })
          uni.navigateBack({
            delta: 1,
          })
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    examine() {
      uni.showLoading({ title: '提交中' })
      if (this.params.detailList.length == 0) {
        uni.showToast({
          title: '请先新增费用',
          icon: 'none',
        })
        return
      }
      expenseApplyExamine(this.params)
        .then(res => {
          uni.hideLoading()
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
          uni.$emit('refreshCostData', { refresh: true })
          uni.navigateBack({
            delta: 1,
          })
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    addSub() {
      const _this = this
      uni.navigateTo({
        url: `/packagePurchase/pages/cost/addSubExpense`,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: function (data) {
            if (data.data) {
              _this.params.detailList = _this.params.detailList.concat(data.data)
              _this.params.detailList.forEach(item => {
                _this.params.taxAmount = parseInt(item.taxAmount) + parseInt(_this.params.taxAmount)
              })
            }
          },
        },
      })
    },
    addCustomer() {
      uni.navigateTo({
        url: `/packagePurchase/pages/record/addCustomer`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f4f5f9;
  padding: 20rpx;
  font-size: 28rpx;
  height: 100vh;
  &_form {
    background-color: white;
    border-radius: 10rpx;
    padding: 0 20rpx;
    .add-client {
      background-color: #2f6fef;
      color: white;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 26rpx;
    }
  }
  &_box {
    background-color: white;
    border-radius: 10rpx;
    padding: 0 20rpx;
    margin: 20rpx 0;
    &_item {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      align-items: center;
      border-bottom: 1rpx solid #f1f1f1;
    }
  }
  .add_sub {
    margin: 20rpx 0;
    .btn {
      background-color: white;
      color: #2f6fef;
    }
    .btn::after {
      border: none;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    position: absolute;
    height: 150rpx;
    bottom: 0;
    background-color: white;
    left: 0;
    right: 0;
    .btn {
      background-color: #2f6fef;
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
    }
    .back {
      background-color: white;
      color: #2f6fef;
      border: 1rpx solid #2f6fef;
    }
  }
}
::v-deep .u-input__content__field-wrapper__field {
  text-align: right !important;
}
::v-deep .u-form-item__body__left {
  width: 150rpx !important;
}
</style>
